<script setup>
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const data = defineProps(["ordersItem"]);
let itemData = reactive(data.ordersItem);
let imgs = ref(JSON.parse(itemData.products));
let showimgs = ref([]);
let total = computed(() => {
  return JSON.parse(itemData.products).reduce((total, item) => {
    return (total += item.count);
  }, 0);
});
let amount = computed(() => {
  return JSON.parse(itemData.products).reduce((total, item) => {
    return (total += item.count * item.price);
  }, 0);
});
const jumpConfirmOrder = () => {
  router.push({
    name: "ConfirmOrder",
    params: { shopId: itemData.shop_id, data: JSON.stringify(itemData) },
  });
};
if (imgs.value.length <3) {
  showimgs.value = imgs.value;
} else {
  showimgs.value = [imgs.value[0], imgs.value[1], imgs.value[2]];
}
</script>
<template>
  <div class="shop-card" @click="jumpConfirmOrder">
    <div class="flex">
      <p>{{ itemData.shop_name }}</p>
      <span>{{ itemData.order_status }}</span>
    </div>
    <div class="flex">
      <ul>
        <li v-for="item in showimgs" :key="item.id" class="goods-list">
          <img :src="item.img_url" alt="" />
        </li>
      </ul>
      <div class="info">
        <p>¥ {{ amount }}</p>
        <p>共{{ total }}件</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.shop-card {
  width: 90%;
  margin: 16px auto;
  padding: 20px 20px 10px 20px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 3px #82828231;
  .flex {
    display: flex;
    justify-content: space-between;
    & > p {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    & > span {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #aaa;
    }
  }
  ul {
    display: flex;
  }
  li {
    margin-right: 16px;
    img {
      width: 55px;
      height: 55px;
    }
  }
  .info {
    p:first-child {
      color: rgb(255, 69, 69);
      font-weight: 600;
    }
    p:nth-child(2) {
      font-size: 14px;
      text-align: right;
      font-weight: 500;
    }
  }
}
</style>
